<template>
  <div class="person">
    <!-- v-model，数据可以双向改变 -->
    姓: <input type="text" v-model="firstName"> <br>  
    名: <input type="text" v-model="lastName"> <br>
    <button @click="changeFullName">修改全名</button> <br>
    全名: <span>{{ fullNmae }}</span>
    全名: <span>{{ fullNmae }}</span>
    全名: <span>{{ fullNmae }}</span>
    全名: <span>{{ fullNmae }}</span>
    全名: <span>{{ fullNmae }}</span>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref,computed} from 'vue'
  let firstName = ref('张')
  let lastName = ref('三')

  // 计算属性有缓存，当出现重复计算时，不会重复计算，会调用缓存中的数据，上面使用了多次fullName，但只计算了1次
  // 这样定义的fullName是一个计算属性，且是只读的，不能直接给fullName赋值
  // let fullNmae = computed(() => {
  //   console.log(1);  //
  //   return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
  // })
  // console.log(fullNmae);   //ComputedRefImpl,计算出来的fullName是响应式数据
  

  // 这样定义的fullName是一个计算属性，是可读可写的
  let fullNmae = computed({
    get(){
      console.log(1);  
      return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
    },
    set(val){    //当在外部修改了fullNmae.value的值时，就会立即传入修改后的值，执行内部函数
      const [str1,str2] = val.split('-')
      firstName.value = str1
      lastName.value = str2
    }
    
  })
  function changeFullName(){
    fullNmae.value = 'li-si'
  }
  
</script>

<style>
  .person{
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button{
    margin: 0 5px;
  }
  ul li{
    font-size: 20px;
  }
</style>